
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Vue.js Switchable Grid</title>

    <style>
    /* Hide un-compiled mustache bindings
    until the Vue instance is ready */

    [v-cloak] {
      display: none;
    }

    *{
    	margin:0;
    	padding:0;
    }

    body{
    	font:15px/1.3 'Open Sans', sans-serif;
    	color: #5e5b64;
    	text-align:center;
    }

    a, a:visited {
    	outline:none;
    	color:#389dc1;
    }

    a:hover{
    	text-decoration:none;
    }

    section, footer, header, aside, nav{
    	display: block;
    }

    /*-------------------------
    	The search input
    --------------------------*/

    .bar{
    	background-color:#5c9bb7;

    	background-image:-webkit-linear-gradient(top, #5c9bb7, #5392ad);
    	background-image:-moz-linear-gradient(top, #5c9bb7, #5392ad);
    	background-image:linear-gradient(top, #5c9bb7, #5392ad);

    	box-shadow: 0 1px 1px #ccc;
    	border-radius: 2px;
    	width: 580px;
    	padding: 10px;
    	margin: 45px auto 25px;
    	position:relative;
    	text-align:right;
    	line-height: 1;
    }

    .bar a{
    	background:#4987a1 center center no-repeat;
    	width:32px;
    	height:32px;
    	display:inline-block;
    	text-decoration:none !important;
    	margin-right:5px;
    	border-radius:2px;
    	cursor:pointer;
    }

    .bar a.active{
    	background-color:#c14694;
    }

    .bar a.list-icon{
    	background-image:url();
    }

    .bar a.grid-icon{
    	background-image:url();
    }

    .bar input{
    	background:#fff no-repeat 13px 13px;

    	border: none;
    	width: 100%;
    	line-height: 19px;
    	padding: 11px 0;

    	border-radius: 2px;
    	box-shadow: 0 2px 8px #c4c4c4 inset;
    	text-align: left;
    	font-size: 14px;
    	font-family: inherit;
    	color: #738289;
    	font-weight: bold;
    	outline: none;
    	text-indent: 40px;
    }

    /*-------------------------
    	List layout
    --------------------------*/

    ul.list{
    	list-style: none;
    	width: 500px;
    	margin: 0 auto;
    	text-align: left;
    }

    ul.list li{
    	border-bottom: 1px solid #ddd;
    	padding: 10px;
    	overflow: hidden;
    }

    ul.list li img{
    	width:120px;
    	height:120px;
    	float:left;
    	border:none;
    }

    ul.list li p{
    	margin-left: 135px;
    	font-weight: bold;
    	color:#6e7a7f;
    }

    /*-------------------------
    	Grid layout
    --------------------------*/

    ul.grid{
    	list-style: none;
    	width: 570px;
    	margin: 0 auto;
    	text-align: left;
    }

    ul.grid li{
    	padding: 2px;
    	float:left;
    }

    ul.grid li img{
    	width:280px;
    	height:280px;
    	object-fit: cover;
    	display:block;
    	border:none;
    }
    </style>

</head>
<body>

<form id="main" v-cloak>

	<div class="bar">

		<!-- These two buttons switch the layout variable,
			 which causes the correct UL to be shown. -->

		<a class="list-icon" v-bind:class="{ 'active': layout == 'list'}" v-on:click="layout = 'list'"></a>
		<a class="grid-icon" v-bind:class="{ 'active': layout == 'grid'}" v-on:click="layout = 'grid'"></a>
	</div>

	<!-- We have two layouts. We choose which one to show depending on the "layout" binding -->

	<ul v-if="layout == 'grid'" class="grid">
		<!-- A view with big photos and no text -->
		<li v-for="a in articles">
			<a v-bind:href="a.url" target="_blank"><img v-bind:src="a.image.large" /></a>
		</li>
	</ul>

	<ul v-if="layout == 'list'" class="list">
		<!-- A compact view smaller photos and titles -->
		<li v-for="a in articles">
			<a v-bind:href="a.url" target="_blank"><img v-bind:src="a.image.small" /></a>
			<p>{{a.title}}</p>
		</li>
	</ul>

</form>

<script src="vue.js"></script>
<script>

    var demo = new Vue({
    	el: '#main',
    	data: {
            // The layout mode, possible values are "grid" or "list".
    		layout: 'grid',

            articles: [{
                "title": "What You Need To Know About CSS Variables",
                "url": "http://tutorialzine.com/2016/03/what-you-need-to-know-about-css-variables/",
                "image": {
                    "large": "http://cdn.tutorialzine.com/wp-content/uploads/2016/03/css-variables.jpg",
                    "small": "http://cdn.tutorialzine.com/wp-content/uploads/2016/03/css-variables-150x150.jpg"
                }
            },
            {
                "title": "Freebie: 4 Great Looking Pricing Tables",
                "url": "http://tutorialzine.com/2016/02/freebie-4-great-looking-pricing-tables/",
                "image": {
                    "large": "http://cdn.tutorialzine.com/wp-content/uploads/2016/02/great-looking-pricing-tables.jpg",
                    "small": "http://cdn.tutorialzine.com/wp-content/uploads/2016/02/great-looking-pricing-tables-150x150.jpg"
                }
            },
            {
                "title": "20 Interesting JavaScript and CSS Libraries for February 2016",
                "url": "http://tutorialzine.com/2016/02/20-interesting-javascript-and-css-libraries-for-february-2016/",
                "image": {
                    "large": "http://cdn.tutorialzine.com/wp-content/uploads/2016/02/interesting-resources-february.jpg",
                    "small": "http://cdn.tutorialzine.com/wp-content/uploads/2016/02/interesting-resources-february-150x150.jpg"
                }
            },
            {
                "title": "Quick Tip: The Easiest Way To Make Responsive Headers",
                "url": "http://tutorialzine.com/2016/02/quick-tip-easiest-way-to-make-responsive-headers/",
                "image": {
                    "large": "http://cdn.tutorialzine.com/wp-content/uploads/2016/02/quick-tip-responsive-headers.png",
                    "small": "http://cdn.tutorialzine.com/wp-content/uploads/2016/02/quick-tip-responsive-headers-150x150.png"
                }
            },
            {
                "title": "Learn SQL In 20 Minutes",
                "url": "http://tutorialzine.com/2016/01/learn-sql-in-20-minutes/",
                "image": {
                    "large": "http://cdn.tutorialzine.com/wp-content/uploads/2016/01/learn-sql-20-minutes.png",
                    "small": "http://cdn.tutorialzine.com/wp-content/uploads/2016/01/learn-sql-20-minutes-150x150.png"
                }
            },
            {
                "title": "Creating Your First Desktop App With HTML, JS and Electron",
                "url": "http://tutorialzine.com/2015/12/creating-your-first-desktop-app-with-html-js-and-electron/",
                "image": {
                    "large": "http://cdn.tutorialzine.com/wp-content/uploads/2015/12/creating-your-first-desktop-app-with-electron.png",
                    "small": "http://cdn.tutorialzine.com/wp-content/uploads/2015/12/creating-your-first-desktop-app-with-electron-150x150.png"
                }
            }]

    	}
    });
	
</script>
</body>
</html>
